<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../bootstrap-table/bootstrap-table.css">
    <script src="../bootstrap-table/bootstrap-table.js"></script>
    <script src="../bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../toastr/toastr.min.css">
    <script src="../echarts/echarts.min.js"></script>

</head>
<body>
<div class="row">
    <div class="col-md-6" id="myChart1" style="height: 550px;width: 600px;"></div>
    <div class="col-md-2 col-md-offset-2" id="myChart2" style="height: 550px;width: 600px;"></div>
</div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: "../SaleCount/selectAll",
            type: "post",
            dataType: "json",
            success: function (result) {
                var source = [];
                source[0] = [];
                source[0][0] = "test";
                source[0][1] = "销售量";
                for (var i = 0; i < result.length; i++) {
                    source[i + 1] = [];
                    source[i + 1][0] = result[i].s_name;
                    source[i + 1][1] = result[i].s_count;
                }
                initChart1(source);
            }
        });
        $.ajax({
            url: "../SaleMoney/selectAll",
            type: "post",
            dataType: "json",
            success: function (result) {
                var source = [];
                source[0] = [];
                source[0][0] = "test";
                source[0][1] = "销售额";
                for (var i = 0; i < result.length; i++) {
                    source[i + 1] = [];
                    source[i + 1][0] = result[i].s_name;
                    source[i + 1][1] = result[i].s_price;
                }
                initChart2(source);
            }
        });

        function initChart1(source) {
            var myChart1 = echarts.init($("#myChart1").get(0));
            var option = {
                legend: {
                    // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                    orient: 'vertical',
                    // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                    x: 'right',
                    // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                    y: 'center',
                    itemWidth: 20,   // 设置图例图形的宽
                    itemHeight: 15,  // 设置图例图形的高
                    textStyle: {
                        color: '#666'  // 图例文字颜色
                    },
                    // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
                    itemGap: 10,
                    backgroundColor: '#eee',  // 设置整个图例区域背景颜色

                },
                title: {
                    text: '销售量'
                },
                tooltip: {show: false},
                dataset: {
                    // 提供一份数据。
                    source: source
                },
                series: [

                    {type: 'pie'}
                ]
            }

            // 使用刚指定的配置项和数据显示图表。
            myChart1.setOption(option);
        }
        function initChart2(source) {
            var myChart2 = echarts.init($("#myChart2").get(0));
            // alert("source="+source);
            var option = {
                //legend为空，会自动从数据源的第一行读取标志信息
                legend: {},
                title: {
                    text: '销售额'
                },
                tooltip: {},
                dataset: {
                    // 提供一份数据。
                    source: source
                },
                // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
                title: {
                    text: '销售额'
                },
                // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
                xAxis: {type: 'category'},
                // 声明一个 Y 轴，数值轴。
                yAxis: {},
                // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
                series: [
                    {type: 'bar'},
                ]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart2.setOption(option);
        }
    })
</script>
</body>
</html>